<template>
    <el-dialog title="添加联系人页面" :visible.sync="dialogFormVisible">
        <el-form ref="formRef" :model="formData" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="formData.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="selectedAddress">
                <el-select v-model="formData.selectedAddress" placeholder="请选择活动区域">
                    <el-option label="安徽" value="安徽"></el-option>
                    <el-option label="湖北" value="湖北"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="重庆" value="重庆"></el-option>
                    <el-option label="西安" value="西安"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input v-model="formData.qq"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="Email">
                <el-input v-model="formData.Email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
//首先 在这个弹窗里面 我们
//第一步分析：是不是要把我们填写的表单数据传递到PersonInformation这个页面
//第二部分析：啥时候传递？在我们点击【立即创建】按钮的时候，获取到填写的表单数据，然后传递到PersonInformation
//第三步分析：子组件向父组件传递数据用什么？this.$emit("事件、属性"，"要传递的值")
//（注：父组件向子组件传递数据用props,我们一会讲，目前这个地方需要子组件向父组件传值）
//第四部分析：子组件传递的值，父组件怎么获取？父组件通过监听子组件向外抛出的事件，来获取值
//第五步分析：父组件怎么监听子组件向外抛出的事件？联想：vue怎么监听事件？v-on:事件名称  或者 @事件名称

//第六部分析：至此，我们已经可以在父组件获取到子组件传过去的表单值，下一步，我们要把接收到的值展示到列表中,添加成功的时候再关闭新增窗口
//第七步分析：怎么把表单数据保存到数据？this.tableData.push(xxx),怎么关闭新增弹出？联想：我们怎么打开的？this.$refs.personDialog.dialogFormVisible=true;
//bug：遇到添加到数组的值全部一样?原因：引用传递，我新增到数组的值，应该是一个新的变量，不应该与原来的值有什么联系
//bug:再次打开时，发现原来新增的数据还在表单处，正常应该我们每次新增的时候，表单都是空的，一个全新的kegon
export default {
    // props:['formData'],
    props:{
        //注意一：属性的值，不要与data里面的变量重名，这个另外一个独立的值
        //注意二：属性的值，是不能直接在 方法里面修改的，这个值相当于是只读的：比如：this.formDataModel=xxx  >错误
        //注意三：那么属性的值不能改，但我们需要修改属性的值怎么办？this.$emit('update:属性名'，修改后的值)
        //比如我们要修改formDataModel，我们可以在方法中：this.$emit("update:formDataModel",this.formData); 
        //这样就把formData这个值传给了formDataModel这个属性了
        //注意四：我们在子组件利用this.$emit->update的方式修改属性的值的时候，在父组件的绑定上需要：【:属性名.sync="xxx"】
        //跟原来的区别在于，多了个‘sync’
        //总结：(属性的双向数据传递)子组件：this.$emit('update:属性名'，修改后的值)。父组件：:属性名.sync="xxx"
        //对于单向数据传递，直接【:属性名="xxx"】就可以了

        //ok,至此，父组件的数据已经传递到formDataModel这个属性里面来了，但是，为什么我们的表单没有数据呢？
        //那是因为我们的表单模型绑定的是formData这个变量，
        //所以我们现在要在
        formDataModel:{
            default:()=>{},
            type:Object
        }
    },
    watch:{
        formDataModel: {
            handler: function(val, oldVal) { //这个是处理函数，当变化时，就会执行这个函数
                this.formData={...val}
            },
            deep: true,
            immediate: true, //立马执行一次,第一次数据无变化的时候，也执行一次处理函数
        }
    },
    data(){
        return {
           dialogFormVisible: false,
           totalCount: 1,
           formData: {
                        name: '',
                        sex: '',
                        age: null,
                        selectedAddress: [],
                        qq: '',
                        Email: '',
            }, 
        //    formData:this.formDataModel,   
        } 
    },
    mounted(){

    },
    methods: {
        onSubmit() {
            //getFormData为我们自己定义的事件，这里的名字随便写，this.formData为我们向外抛出这个事件的时候传递的值
            //为了避免我们抛出的值，与我们组件内部的formData有什么关联，我们抛出一个新的值，即：用深赋值的方法去除引用传递
            //深度赋值:
            //方法一：通过先把对象转换为字符串，再把字符串转换为对象，达到此目的 具体代码：JSON.parse(JSON.stringify(this.formData)) . 
            //方法二：解构：{...this.formData}
            //两种方式其实都有弊端，具体什么弊端，以后你再做了解，现在先以这两种方式为主
            // JSON.parse(JSON.stringify(this.formData)) 不用这个 列表数据也不是一样的，因为上午你在PersonInformation组件里面
            //formData 不能直接用  前面要加this
            this.$emit("getFormData",this.formData);
            // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果,可以用这个置空
            //formData的名字不要跟其他属性的名字一样，不然无法识别
            //formRef不生效的原因：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的，传入 Form 组件的 model 中的字段
            this.$refs.formRef.resetFields();
            //这个关闭窗口的在这里设置比较好
            this.dialogFormVisible=false;
        },
    }
}
</script>
